<template>
	<div class="nav">
		<ul>
			<router-link :to="''"><li>首页</li></router-link>
			<router-link :to="''"><li>文章</li></router-link>
			<router-link :to="'/PhotoAlbum'"><li>云相册</li></router-link>
		</ul>
		<div class="search">
			<i class="el-icon-search"></i>
			<div class="box">
				<input type="text" placeholder="搜索"/>
				<div class="search-line"></div>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "NavLeft"
    }
</script>

<style scoped>
	.nav {
		margin-top: .1rem;
	}
	@media screen and (max-width: 992px) {
		ul {
			flex-direction: row;
			line-height: 1.5rem;
		}
	}
	@media screen and (min-width: 993px) {
		ul {
			flex-direction: column;
		}
	}
	a {
		text-decoration: none;
		color: #666666;
		flex: 1;
	}
	ul {
		display: flex;
		list-style: none;
		color: #666666;
	}
	ul li {
		width: 100%;
		padding: .1rem 0;
		border-top: .01rem solid #F3F3F3;
		text-align: center;
	}
	ul li:hover {
		cursor: pointer;
		background-color: #bae7ff;
	}
	.search {
		border-top: .01rem solid #F3F3F3;
		padding-top: .05rem;
		text-align: center;
	}
	.box {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding: .05rem 0 .1rem 0;
		width: 75%;
	}
	.search-line {
		width: 100%;
		height: .01rem;
		border-bottom: #23b6d4 1px solid;
	}
	input {
		border: none;
		outline: none;
		width: 90%;
	}
</style>
